<script setup>
import AsideContent from "@/views/home/components/AsideContent.vue";
import FooterContent from "@/views/home/components/FooterContent.vue";
import HeaderContent from "@/views/home/components/HeaderContent.vue";
import MainContent from "@/views/home/components/MainContent.vue";
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <AsideContent></AsideContent>
            </el-aside>
            <el-container>
                <el-header>
                    <HeaderContent></HeaderContent>
                </el-header>
                <el-main>
                    <MainContent></MainContent>
                </el-main>
                <el-footer>
                    <FooterContent></FooterContent>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="scss">
.common-layout {
    height: $layout-height;
    overflow: hidden;
    /* 设定左侧菜单栏宽度 */
    .el-aside {
        width: 200px;
    }

    /* 设定头部菜单高度 */
    .el-header {
        height: 60px;
    }

    /* 设定主屏幕高度 */
    .el-main {
        height: $main-height; // 浏览器高度 - 头部高度 - 底部高度 - body外层8px（上下共16px）
    }

    /* 设定底部高度 */
    .el-footer {
        height: 30px;
    }
}
</style>
